//Vue项目中，见到store就等于见到 Vuex
//因为Vuex的三个核心属性，都由Store管理，想要使用必须先拿到store

import Vue from 'vue'
//0：安装并引入Vuex   npm i vuex@3
import Vuex from 'vuex'
//使用Vuex，只有使用后，才可以将store绑定到所有VM和VC身上
//一定要在下面获取实例之前注册插件
Vue.use(Vuex)


//1：准备actions——用于响应组件中的动作
const actions = {

    // 如果不需要特殊处理，可在组件中直接调用下个mutation对象（简化调用）


    //第一个参数是简化版的store（上下文），第二个参数是参数值
    // jia(context, value) {
    //     console.log('action中的jia被调用了', context, value)
    //     //提交将数据流转至mutation
    //     //！！实际开发，为了清晰避免混淆，mutation中的方法名【大写】
    //     context.commit('JIA', value)
    // },
    // jian(context, value) {
    //     context.commit('JIAN', value)
    // },


    //业务逻辑只能放在action中，不可以放在后续流程！！
    jiaOdd(context, value) {
        //上下文参数中可以获取到当前属性值
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    }
}

//2：准备mutations——用于实际操作数据
const mutations = {
    //第一个参数就是配置的state对象，第二个参数是值
    JIA(state, value) {
        console.log('mutation中的JIA被调用了', state, value)
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    }
}

//3：准备state——用于存储数据（类似Vue的data）
const state = {
    sum: 1,
    school: '尚硅谷',
    subject: 'Vue',
}

//扩展，getters——用于将state中的数据进行加工（类似Vue的计算属性）
//可复用
const getters = {
    BigSum(state) {
        return state.sum * 10;
    }
}


//4：最后创建一个Store并赋值（Vuex身上的）
const store = new Vuex.Store({
    //属性赋值同名可简写
    actions, mutations, state, getters
})

//5：暴露导出store
export default store;